<template>
  <div>
    <div class="oneList">
      <!-- <div class="one" >
     
    </div> -->
      <div class="one" style="display: flex; justify-content: space-between;">

        <div id="chart3" style="width: 200px; height: 250px; "></div>
        <div id="chart4" style="width: 200px; height: 250px;"></div>

      </div>
      <div class="one">
        <div ref="chart5" style="width: 440px; height: 280px; margin-right: 20px;"></div>

      </div>
      <div class="one">
        <div ref="chart6" style="width: 440px; height: 280px; margin-right: 20px;"></div>
      </div>
    </div>
    <div class="oneList">
      <div class="two">
        <div id="chart" style="width: 700px; height: 380px; margin-right: 280px;"></div>

      </div>
      <div class="two">
        <div id="chart2" style="width: 700px; height: 380px; margin-right: 280px;"></div>

      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {
  countGenderBed,
} from "@/api/dormitory/basedata/dormitory";

import { isEmpty } from "@/api/helpFunc";

export default {
  data() {
    return {
      gender_bed_list: [],
    }
  },
  mounted() {
    this.drawChart();
    this.drawChart2();
    this.drawChart3();
    this.drawChart4();
    this.renderChart();
    this.renderChart2();
  },
  methods: {
    // 里建床位比例
    async drawChart3() {
      let res = await countGenderBed();
      let data = [];
      if (res.code == 200) {
        res.data.map(x => {
          console.log(x);
          if (!isEmpty(x.gender) && x.gender.indexOf("在籍") !== -1) {
            data.push({
              value: x.bedNum,
              name: x.gender
            });
          }
        });
      }

      console.log(data);
      var myChart = echarts.init(document.getElementById('chart3'));

      var option = {


        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [...data]
          }
        ]
      };

      myChart.setOption(option);

      // 在饼图中间加入标题
      myChart.setOption({
        graphic: [
          {
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
              text: '在籍人数',
              textAlign: 'center',
              fill: '#000',
              fontSize: 12
            }
          }
        ]
      });
    },
    // 长堽床位比例
    drawChart4() {
      var myChart = echarts.init(document.getElementById('chart4'));

      var option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 548, name: '已住床位', itemStyle: { color: '#83bff6' } },
              { value: 735, name: '未住床位', itemStyle: { color: '#76E4E4' } },

            ]
          }
        ]
      };

      myChart.setOption(option);

      // 在饼图中间加入标题
      myChart.setOption({
        graphic: [
          {
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
              text: '长堽校区',
              textAlign: 'center',
              fill: '#000',
              fontSize: 12
            }
          }
        ]
      });
    },
    // 和园
    renderChart2() {
      const chartDom = this.$refs.chart6;
      const myChart = echarts.init(chartDom);
      const option = {
        title: {
          text: ' 里建校区和园入住情况',
          subtext: '人数'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1幢', '2幢', '3幢', '4幢', '5幢', '6幢', '7幢', '8幢', '9幢', '10幢']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320, 1111, 2222, 1365],
            type: 'line',
            lineStyle: {
              color: '#00AEAE' // 设置折线颜色为红色
            }, itemStyle: {
              color: '#00AEAE' // 设置折线点的颜色为蓝色
            },
            areaStyle: {
              color: '#76E4E4' // 设置折线区域颜色
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    // 馨园
    renderChart() {
      const chartDom = this.$refs.chart5;
      const myChart = echarts.init(chartDom);
      const option = {
        title: {
          text: ' 里建校区馨园入住情况',
          subtext: '人数'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1幢', '2幢', '3幢', '4幢', '5幢', '6幢', '7幢', '8幢', '9幢', '10幢']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320, 1111, 2222, 1365],
            type: 'line',
            areaStyle: {
              color: '#83bff6' // 设置折线区域颜色
            }
          }
        ]
      };
      myChart.setOption(option);
    },

    // 里建校区学院入住情况开始
    drawChart() {
      var myChart = echarts.init(document.getElementById('chart'));

      let dataAxis = ['水利', '电力', '机电', '交通院', '自动化', '本科', '校内实习', '健康驿站', '教师'];
      let data = [2200, 1802, 1910, 2340, 2900, 3300, 3100, 1230, 442];
      let yMax = 3000;
      let dataShadow = [];
      for (let i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
      }

      var option = {
        title: {
          text: '里建校区学院入住情况',
          subtext: '各学院入住人数'
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            inside: true,
            color: '#fff'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          z: 10
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#999'
          }
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [
          {
            type: 'bar',
            showBackground: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ])
              }
            },
            data: data
          }
        ]
      };

      myChart.setOption(option);

      const zoomSize = 4; // 新的数据数量 - 1
      myChart.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        myChart.dispatchAction({
          type: 'dataZoom',
          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        });
      });
    },
    // 里建校区学院入住情况结束


    //长堽校区学院入住情况开始
    drawChart2() {
      var myChart = echarts.init(document.getElementById('chart2'));

      let dataAxis = ['水利', '电力', '机电', '交通院', '自动化', '本科', '校内实习', '健康驿站', '教师'];
      let data = [2600, 1102, 1510, 2340, 2100, 2300, 2100, 1230, 242];
      let yMax = 3000;
      let dataShadow = [];
      for (let i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
      }

      var option = {
        title: {
          text: '长堽校区学院入住情况',
          subtext: '各学院入住人数'
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            inside: true,
            color: '#fff'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          z: 10
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#999'
          }
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [
          {
            type: 'bar',
            showBackground: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#7CF7F7' },
                { offset: 0.5, color: '#76E4E4' },
                { offset: 1, color: '#66DCDC' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#76E4E4' },
                  { offset: 0.7, color: '#7CF7F7' },
                  { offset: 1, color: '#66DCDC' }
                ])
              }
            },
            data: data
          }
        ]
      };

      myChart.setOption(option);

      const zoomSize = 4; // 新的数据数量 - 1
      myChart.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        myChart.dispatchAction({
          type: 'dataZoom',
          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        });
      });
    }
    // 长堽校区学院入住情况结束
  }
};
</script>

<style lang="scss" scoped>
.oneList {
  margin: 10px auto;
  display: flex;
  justify-content: space-between;
  width: 98%;
  height: 220px;

  // background-color: rebeccapurple;
  .one {
    width: 32.5%;
    height: 250px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 5px 10px;
  }

  .two {
    padding: 5px 10px;
    margin-top: 40px;
    width: 49.5%;
    height: 320px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  }
}
</style>